<template>
  <div class="page-h Home">
    <van-swipe :show-indicators="false" vertical :loop="false" @change="changeVideo">
      <van-swipe-item class="product_swiper" v-for="(item,index) in mvinfo" :key="index">
        <div class="video_container">
          <video
            class="video_box"
            loop
            webkit-playsinline="true"
            x5-video-player-type="h5-page"
            x5-video-player-fullscreen="true"
            playsinline
            preload="auto"
           
            :playOrPause="playOrPause"
            @click="pauseVideo"
            :src="item.videoUrl"
          ></video>
          <!-- 封面 -->
          <!-- <img :src="item.singerPhoto" v-show="isShowVideo" class="play" /> -->
          <!-- 播放暂停按钮 -->
          <img
            src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"
            v-show="isShowIcon"
            class="icon_play"
            @click="playVideo"
          />
        </div>
        <!-- 评论 -->
        <aside class="share_box">
          <div class="user-photo">
            <img :src="item.singerPhoto" alt="加载中" />
          </div>
          <div class="like" @click="ponitLike">
            <van-icon :name="iconStyle" size="25px" :color="iconColor" />
            <p>{{pointGood}}</p>
          </div>
          <div class="comment" @click="isShowComment">
            <van-icon name="chat-o" size="25px" />
            <p>{{share}}</p>
          </div>
        </aside>
        <!-- 底部信息栏 -->
        <div class="music-descript">
          <div class="song-name">{{item.songName}}</div>
        </div>
        <div class="singer">{{item.singerName}}</div>
        <!-- 评论栏 -->
        <van-icon name="ellipsis" class="close-comment" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      current: 0,
      playOrPause: true,
      isShowIcon: true,
      isShowVideo: true,
      mv: "",
      iconStyle: "like-o",
      iconColor: "",
      isShowComment: false,
      mvinfo: [],
      pointGood: `${parseInt(Math.random() * (5000 + 1))}`,
      share: `${parseInt(Math.random() * (6000 + 1))}`,
      mvUrl: []
    };
  },
  created() {
    let _url = this.url;
    this.$axios
      .get(_url + "/mv/first?limit=6 & withCredentials: true ")
      .then(res => {
        // console.log(res.data.data);
        let mvData = res.data.data;
        mvData.forEach(item => {
          this.$axios
            .get(_url + `/mv/url?id=${item.id} & withCredentials: true`)
            .then(res => {
              // console.log(res.data.data.url);
              this.mvinfo.push({
                videoUrl: res.data.data.url,
                singerPhoto: item.cover,
                songName: item.name,
                singerName: item.artistName
              });
            });
        });
      });
    console.log(this.mvinfo);
  },

  methods: {
    playVideo() {
      let video = document.querySelectorAll("video")[this.current];
      video.play();
      this.isShowIcon = false;
      this.isShowVideo = false;
      this.playOrPause = true;
    },

    //暂停播放
    pauseVideo() {
      let video = document.querySelectorAll("video")[this.current];

      if (this.playOrPause) {
        this.isShowIcon = true;
        video.pause();
      } else {
        this.isShowIcon = false;
        video.play();
      }
      this.playOrPause = !this.playOrPause;
    },

    //滑动
    changeVideo(index) {
      let video = document.querySelectorAll("video")[this.current];
      console.log(video);
      video.pause();
      this.playOrPause = false;
      this.current = index;
      this.pauseVideo();
      this.isShowVideo = false;
    },
    //双击喜欢
    ponitLike() {
      if (this.iconStyle == "like-o") {
        this.iconStyle = "like";
        this.iconColor = "orange";
        this.pointGood = Number(this.pointGood) + 1;
      } else {
        this.iconStyle = "like-o";
        this.iconColor = "white";
        this.pointGood = Number(this.pointGood) - 1;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.clear {
  clear: both;
}
.close-comment {
  position: absolute;
  right: 20px;
  z-index: 3;
}
//点赞评论部分
.share_box {
  position: absolute;
  z-index: 999;
  right: 2rem;
  bottom: 5.5rem;
  font-size: 1rem;
  height: 30vh;
  p {
    font-size: 12px;
    margin: auto;
  }
  div {
    margin: 25px auto;
    // letter-spacing: 0.3rem;
  }
  .like,
  .comment {
    padding-left: 8px;
  }

  .user-photo {
    height: 2.5rem;
    width: 2.5rem;
    border: 1px solid white;
    border-radius: 50%;
    margin-top: 0;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}

//底部信息展示
@mixin nice {
  padding: 0 5px;
  box-sizing: border-box;
  margin: 10px auto;
  height: 1.6rem;
  line-height: 200%;
  background: black;
}
.music-descript {
  position: relative;
  z-index: 99;
  .song-name {
    position: absolute;
    bottom: 6rem;
    left: 0.7rem;
    @include nice;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.singer {
  position: absolute;
  bottom: 3.5rem;
  left: 0.7rem;
  @include nice;
  z-index: 999;
}

.video-player {
  height: 100vh;
  width: 100vw;
}

.product_swiper {
  width: 100vw;
  height: 100vh;
  background-color: rgb(31, 31, 31)
}

.van_swipe {
  width: 100vw;
  height: 100vh;
  max-width: 550px;
  margin: 0 auto;
  position: relative;
}

.van-swipe {
  width: 100%;
  height: 100%;
}

.container_box {
  width: 100vw;
  height: 100vh;
  background: #000;
}

.video_box {
  object-fit: fill !important;
  z-index: 999;
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

video {
  object-position: 0 0;
}

.icon_play {
  position: absolute;
  top: 44%;
  right: 0;
  left: 0;
  bottom: auto;
  margin: auto;
  z-index: 999;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
}

.play,
.platStart {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 40%;
}
</style>